<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Auto complete</title>
    <link rel="icon" href="../favicon.ico"/>

    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="css/auto-complete.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        body{
            color: white;
        }
        .collapsible-header:focus {
            outline: 0;
        }

        .ppt-taxo__span-icon.Person:before {
            content: "\f2be";
            color: #2aa1d3;
        }

        .ppt-taxo__span-icon.Movie:before {
            content: "\e914";
            color: #8bb71a;
        }

    </style>
</head>
<body style="background-color: #2e3138;">

<div class="navbar-fixed">
    <nav style="background-color: #444951;">
        <div class="nav-wrapper">
            <form style="height:100%; padding-left: 8%; padding-right: 8%; background-color: #525863;"
                  onsubmit="event.preventDefault(); return false;">
                <div style="display: flex;">
                    <label class="label-icon" for="search">
                        <i class="ppt-icon ppt-icon-search-plus" style="color:#8bb71a; font-size: 30px"></i>
                    </label>
                    <input id="search" class="search-input" type="search" required>
                </div>
            </form>
        </div>
    </nav>
</div>

<div class="">
    <!-- ======================================================================================================= -->
    <!-- GRAPH QUERY-->
    <!-- ======================================================================================================= -->
    <div id="p-collapsible-popoto" class="active">
        <div class="collapsible-header white-text" style="background-color: #525863; border-bottom: 0;"><i
                class="ppt-icon ppt-icon-logo" style="color:#8bb71a;"></i> Graph Query
        </div>
        <div class="collapsible-body no-padding" style="height: 600px; border-bottom: 0;">
            <div id="popoto-taxonomy" class="ppt-taxo-nav" style="color: white; width: 280px">
            </div>
            <div id="popoto-graph" class="ppt-div-graph">
            </div>
        </div>
    </div>
    <!-- ======================================================================================================= -->
    <!-- QUERY -->
    <!-- ======================================================================================================= -->
    <div id="p-collapsible-query" class="active">
        <div class="collapsible-header white-text" style="background-color: #525863;border-bottom: 0;"><i
                class="ppt-icon ppt-icon-wrench" style="color:#8bb71a;"></i>Query
        </div>
        <div class="collapsible-body no-padding" style="border-bottom: 0;">
            <div id="popoto-cypher" class="ppt-container-cypher center-align">
            </div>
        </div>
    </div>
    <!-- ======================================================================================================= -->
    <!-- RESULTS -->
    <!-- ======================================================================================================= -->
    <div id="p-collapsible-results" class="active">
        <div class="collapsible-header white-text" style="background-color: #525863;border-bottom: 0;"><i
                class="ppt-icon ppt-icon-sort-alpha-asc" style="color:#8bb71a;"></i>Results&nbsp;
            <span class="" id="result-total-count">0</span>
        </div>
        <div class="collapsible-body no-padding" style="border-bottom: 0;">
            <div class="row">
                <div id="popoto-results" class="col s12 cards-container">

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.min.js" charset="utf-8"></script>
<script src="js/auto-complete.min.js"></script>
<script src="js/main.js"></script>
<script>

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    popoto.graph.WHEEL_ZOOM_ENABLED = false;

    popoto.provider.node.Provider = {
        "Person": {
            returnAttributes: ["name", "born"],
            constraintAttribute: "name",
            "resultOrderByAttribute": "name",
            "valueOrderByAttribute": "name",
            "isValueOrderAscending": true,
            getDisplayType: function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            },
            "getImagePath": function (node) {
                // if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                //     return "../material/person/" + node.attributes['name'] + ".jpg"
                // } else if (node.hasOwnProperty("value") && node.value.length > 0) {
                //     return "../material/person/" + node.value[0].attributes['name'] + ".jpg"
                // }
                return 'image/node/person/person.svg';
            },
            "displayResults": function (pResultElmt) {

                var div1 = pResultElmt.append("div").attr("style", "display: flex;");
                div1.append("img")
                    .attr("height", "100px")
                    .attr("src", function (result) {
                        return 'image/node/person/person.svg';
                        // return "../material/person/" + result.attributes.name + ".jpg";
                    });

                var div = div1.append("div").attr("style", "margin-left: 20px;");
                // An <h3> element containing the person name
                div.append("h4")
                    .text(function (result) {
                        return result.attributes.name;
                    });

                // A <span> element with the computed age from born attribute
                div.filter(function (result) {
                    // Filter on attribute having born attribute value
                    return result.attributes.born;
                }).append("span").text(function (result) {
                    return "Born: " + result.attributes.born;
                });

            }
        },
        "Movie": {
            "returnAttributes": ["title", "tagline", "released"],
            "constraintAttribute": "title",
            "resultOrderByAttribute": "title",
            "valueOrderByAttribute": "title",
            "isValueOrderAscending": true,
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            },
            "getImagePath": function (node) {
                // if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                //     return "../material/movie/" + node.attributes['title'] + ".jpg"
                // } else if (node.hasOwnProperty("value") && node.value.length > 0) {
                //     return "../material/movie/" + node.value[0].attributes['title'] + ".jpg"
                // }
                return 'image/node/movie/movie.svg';
            },
            "displayResults": function (pResultElmt) {

                var div1 = pResultElmt.append("div").attr("style", "display: flex;");
                div1.append("img")
                    .attr("height", "100px")
                    .attr("src", function (result) {
                        return 'image/node/movie/movie.svg';
                    });

                var div = div1.append("div").attr("style", "margin-left: 20px;");
                // An <h3> element containing the movie title
                div.append("h4")
                    .attr("style", "margin-top: 0;")
                    .text(function (result) {
                        return result.attributes.title;
                    });

                // A <span> element with the movie tagline
                div.append("div").filter(function (result) {
                    // Filter on attribute having born attribute value
                    return result.attributes.tagline;
                }).append("span").text(function (result) {
                    return result.attributes.tagline;
                });

                // A <span> element with the release date
                div.append("div").filter(function (result) {
                    // Filter on attribute having born attribute value
                    return result.attributes.released;
                }).append("span").text(function (result) {
                    return "Release date: " + result.attributes.released;
                });

            }
        }
    };

    popoto.provider.link.Provider = {

        // Customize the text displayed on links:
        "getTextValue": function (link) {
            if (link.type === popoto.graph.link.LinkTypes.RELATION || link.type === popoto.graph.link.LinkTypes.SEGMENT) {

                var targetName = "";
                if (link.type === popoto.graph.link.LinkTypes.SEGMENT) {
                    targetName = " " + popoto.provider.node.getTextValue(link.target);
                }

                switch (link.label) {
                    case "ACTED_IN":
                        return "Acted in" + targetName;
                    case "DIRECTED":
                        return "Directed" + targetName;
                    case "PRODUCED":
                        return "Produced" + targetName;
                    case "WROTE":
                        return "Wrote" + targetName;
                    case "FOLLOWS":
                        return "Follows" + targetName;
                    case "REVIEWED":
                        return "Reviewed" + targetName;
                    default :
                        return "Unexpected relation"
                }
            } else {
                return "";
            }
        }

    };
    popoto.result.onTotalResultCount(function (count) {
        document.getElementById("result-total-count").innerHTML = "(" + count + ")";
    });


    function initCollapsible() {

        var element = document.querySelector('#collapsible-components');
    }

    initCollapsible();

    driver.verifyConnectivity().then(function () {
        popoto.start("Person");
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })

</script>
</body>
</html>